<template>
  <!-- 搜索页面 zj -->
  <div>
    <div class="content" :style="backgroundDiv">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="Search for your favourite dishes"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch(value)">Cancel</div>
          </template>
        </van-search>
      </form>
    </div>
    <!-- <div class="item"></div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      backgroundDiv: {
        backgroundImage: 'url(' + require('../../static/img/01.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
      },
    };
  },
  methods: {
    onSearch(val) {
      console.log('val:', val);
    },
  },
};
</script>
<style scoped>
.content {
  height: 30rem;
  /* background-color: #f0f0f0; */
}

.van-search {
  background-color: #f0f0f0;
}
/* 搜索框 */
.van-search__content {
  background-color: #dcdcdc;
  border-radius: 1rem;
}
</style>